<template>
	<view class="my-page">
		<view class="page-bg">
			<view class="mask"></view>
		</view>
		
		<u-navbar :autoBack="false" bgColor="transparent" placeholder>
			<view slot="left"></view>
		</u-navbar>
		
		<view class="container">
			<view class="info-box">
				<view class="user-box">
					<image v-if="userInfo.avatar" class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="content">
						<view class="name-box" v-if="userInfo.id || userInfo.id === 0">
							<text class="name">{{ userInfo.name }}</text>
							<image v-if="userInfo.level == 1" class="vip" src="@/static/vip.png" mode="aspectFill"></image>
							<image v-else-if="userInfo.level == 2" class="vip" src="@/static/svip.png" mode="aspectFill"></image>
							<image v-else-if="userInfo.level == 3" class="vip" src="@/static/plus.png" mode="aspectFill"></image>
						</view>
						<view class="name-box" v-else @click="goUrl('/pages/login/login')">
							<text class="name">立即登录</text>
						</view>
						<view class="id">
							<text class="text">ID:{{ userId }}</text>
							<text class="copy" @click.stop="copyHandle(userId)">复制</text>
						</view>
					</view>
					<view class="edit-box" @click="goUrl('/pages/my/userInfo')">
						<u-icon name="edit-pen-fill" color="#333" size="40rpx"></u-icon>
					</view>
				</view>
				<view class="recommend" v-if="userInfo.f_user">
					<view class="info">
						<image class="avatar" :src="userInfo.f_user.avatar" mode="aspectFill"></image>
						<view class="name">推荐人：{{ userInfo.f_user.name }}</view>
					</view>
					<view class="look" @click="show = true">查看信息</view>
				</view>
				<view class="data-box">
					<view class="item">
						<view class="data" @click="goUrl('/pages/my/incomeRecord')">
							<view class="label">可用{{ config.trade_currency }}</view>
							<view class="value">{{ userInfo.deposit }}</view>
						</view>
						<view class="btn-box" v-if="userInfo.level > 0">
							<button class="btn" size="mini" @click="goUrl('/pages/my/exchange')">互转</button>
							<button class="btn" size="mini" @click="goWithdraw">提现</button>
						</view>
					</view>
					<view class="item">
						<view class="data" @click="goUrl('/pages/my/gold')">
							<view class="label">可用{{ config.trade_currency_2 }}</view>
							<view class="value">{{ userInfo.integral }}</view>
						</view>
					</view>
				</view>
				<!-- <view class="contribution" @click="goUrl('/pages/my/contribution')">
					<view class="label-box">
						<text class="label">可兑换贡献值</text>
						<text class="value">0</text>
					</view>
					<button class="btn" size="mini">兑换分红</button>
				</view> -->
			</view>
			<view class="fun-box">
				<view class="card-box">
					<view class="title-box">
						<view class="title">我的订单</view>
						<view class="mord" @click="goUrl('/pages/my/order/order')">
							<text class="text">全部</text>
							<u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
						</view>
					</view>
					<view class="list">
						<!-- <view class="item item-33" @click="goUrl('/pages/my/order/order?type=1')">
							<image class="icon" src="@/static/cell-1.jpg" mode="aspectFill"></image>
							<view class="label">待付款</view>
						</view> -->
						<view class="item item-33" @click="goUrl('/pages/my/order/order?type=2')">
							<image class="icon" src="@/static/cell-2.jpg" mode="aspectFill"></image>
							<view class="label">待发货</view>
						</view>
						<view class="item item-33" @click="goUrl('/pages/my/order/order?type=3')">
							<image class="icon" src="@/static/cell-3.jpg" mode="aspectFill"></image>
							<view class="label">待收货</view>
						</view>
						<view class="item item-33">
							<image class="icon" src="@/static/cell-4.jpg" mode="aspectFill"></image>
							<view class="label">退换货</view>
						</view>
					</view>
				</view>
				
				<view class="promotion-box">
					<block v-if="userInfo.level > 0">
						<view class="top" @click="goCard">
							<image class="image" src="@/static/card.jpg" mode="widthFix"></image>
						</view>
						<view class="center" v-if="config.ranking_list_num != 0">
							<view class="item" @click="goUrl('/pages/my/ranking')">
								<image class="image" src="@/static/ranking.png" mode="widthFix"></image>
							</view>
							<view class="item" @click="goWebView">
								<image class="image" src="@/static/hosting.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="center" v-else>
							<view class="item" @click="goWebView">
								<image class="image" src="@/static/hosting-big.png" mode="widthFix"></image>
							</view>
						</view>
					</block>
					<view class="bottom" @click="goShare">
						<image class="image" src="@/static/share.png" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="shop-box" v-if="userInfo.level > 0">
					<view class="item" @click="goUrl('/pages/my/code')">
						<image class="icon" src="@/static/duihuan.png" mode="aspectFill"></image>
						<view class="text">兑换码</view>
					</view>
					<view class="item" @click="goUrl('/pages/my/shop/shop')">
						<image class="icon" src="@/static/fuli.png" mode="aspectFill"></image>
						<view class="text">会员福利</view>
					</view>
				</view>
				
				<view class="card-box mt-24">
					<view class="title-box">
						<view class="title">我的工具</view>
					</view>
					<view class="list">
						<view class="item" v-if="userInfo.level > 0" @click="goUrl('/pages/my/income')">
							<image class="icon" src="@/static/cell-8.png" mode="aspectFill"></image>
							<view class="label">我的收益</view>
						</view>
						<view class="item" @click="goUrl('/pages/my/bank/bank')">
							<image class="icon" src="@/static/cell-5.jpg" mode="aspectFill"></image>
							<view class="label">我的卡包</view>
						</view>
						<view class="item" @click="goUrl('/pages/my/team')">
							<image class="icon" src="@/static/cell-9.png" mode="aspectFill"></image>
							<view class="label">我的团队</view>
						</view>
						<view class="item" v-if="userInfo.level > 0" @click="goUrl('/pages/my/foldback')">
							<image class="icon" src="@/static/cell-10.png" mode="aspectFill"></image>
							<view class="label">推三返一</view>
						</view>
						<!-- <view class="item" v-if="userInfo.level > 0" @click="goUrl('/pages/my/dividend')">
							<image class="icon" src="@/static/cell-11.png" mode="aspectFill"></image>
							<view class="label">我的分红</view>
						</view> -->
						<view class="item" v-if="userInfo.level > 0" @click="goUrl('/pages/my/gold')">
							<image class="icon" src="@/static/cell-12.png" mode="aspectFill"></image>
							<view class="label">我的{{ config.trade_currency_2 }}</view>
						</view>
						<view class="item" v-if="config.wx_shenhe == '0'" @click="goUrl('/pages/my/realName/realName')">
							<image class="icon" src="@/static/cell-6.jpg" mode="aspectFill"></image>
							<view class="label">结算开户</view>
						</view>
						<view class="item" @click="goUrl('/pages/my/payPass/payPass')">
							<image class="icon" src="@/static/cell-18.png" mode="aspectFill"></image>
							<view class="label">结算设置</view>
						</view>
						<view class="item" @click="goUrl('/pages/my/address/address')">
							<image class="icon" src="@/static/cell-7.jpg" mode="aspectFill"></image>
							<view class="label">地址管理</view>
						</view>
						<view class="item" v-if="userInfo.level > 0" @click="goShare">
							<image class="icon" src="@/static/cell-13.png" mode="aspectFill"></image>
							<view class="label">推广海报</view>
						</view>
						<view class="item" v-if="userInfo.level > 0 && config.ranking_list_num != 0" @click="goUrl('/pages/my/ranking')">
							<image class="icon" src="@/static/cell-14.png" mode="aspectFill"></image>
							<view class="label">排行榜</view>
						</view>
						<view class="item" v-if="userInfo.level > 0" @click="goWebView">
							<image class="icon" src="@/static/cell-15.png" mode="aspectFill"></image>
							<view class="label">朋友圈</view>
						</view>
						<!-- <view class="item" @click="goUrl('/pages/my/contribution')">
							<image class="icon" src="@/static/cell-16.png" mode="aspectFill"></image>
							<view class="label">贡献值</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		
		<u-tabbar :value="2" activeColor="#5749f7" inactiveColo="#333" fixed= placeholder safeAreaInsetBottom zIndex="100">
			<u-tabbar-item text="首页" icon="/static/tabbar/index.png" @click="tabbarChang('/pages/index/index')"></u-tabbar-item>
			<u-tabbar-item text="推广" icon="/static/tabbar/share.png" @click="tabbarChang('/pages/share/share')"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="/static/tabbar/my_fill.png"></u-tabbar-item>
		</u-tabbar>
		
		<u-popup :show="show" mode="center" round="16rpx" :safeAreaInsetBottom="false" closeable @close="show = false">
			<view class="popup-box" v-if="userInfo.f_user">
				<view class="title-box">推荐人信息</view>
				<view class="content">
					<view class="item">
						<view class="text">推荐人：{{ userInfo.f_user.name }}</view>
					</view>
					<view class="item">
						<view class="text">手机号：{{ mobileEncrypt(userInfo.f_user.mobile) }}</view>
						<view class="copy" @click="copyHandle(userInfo.f_user.mobile)">复制</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="realShow" mode="center" round="16rpx" :safeAreaInsetBottom="false" closeable @close="realShow = false">
			<view class="real-popup">
				<image class="image" src="@/static/settlement-empty.png" mode="aspectFill"></image>
				<view class="text">您暂未实名，无法提现</view>
				<button class="btn" @click="goReal">去实名</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getMaterial, getPugongying, getConfig } from '@/api/api'
	
	export default {
		data () {
			return {
				userInfo: {
					avatar: '',
					name: '',
					id: '',
					deposit: 0,
					integral: 0,
				},
				userId: '',
				config: {},
				
				show: false,
				realShow: false,
			}
		},
		onShow () {
			this.userId = uni.getStorageSync('userId') || ''
			
			getMaterial({}, { custom: { jump: false } }).then(res => {
				if (res) {
					this.userInfo = res.data.data
					this.userId = res.data.data.id
				}
			})

			getConfig().then(res => {
				if (res) {
					this.config = res.data
				}
			})
		},
		methods: {
			goUrl (url) {
				uni.navigateTo({
					url
				})
			},
			copyHandle (data) {
				uni.setClipboardData({
					data,
					success: () => {
						console.log('success');
					}
				})
			},
			goShare () {
				uni.switchTab({
					url: '/pages/share/share'
				})
			},
			goWebView () {
				uni.showLoading({ mask: true })
				getPugongying().then(req => {
					uni.hideLoading({ noConflict: true })
					if (req) {
						uni.navigateTo({
							url: '/pages/my/webView',
							success: (res) => {
								res.eventChannel.emit('onUrl', {
									url: req.data.data,
								})
							}
						})
					}
				})
			},
			goWithdraw () {
				if (this.config.shiming_open == 0) {
					uni.navigateTo({
						url: '/pages/my/withdraw'
					})
				} else {
					if (this.userInfo.is_shi == 0) {
						this.realShow = true
					} else {
						uni.navigateTo({
							url: '/pages/my/withdraw'
						})
					}
				}
			},
			goReal () {
				this.realShow = false
				
				uni.navigateTo({
					url: '/pages/my/realName/realInfo'
				})
			},
			goCard () {
				if (this.userInfo.is_create_card == 1) {
					uni.navigateTo({
						url: '/pages/my/card/card'
					})
				} else {
					uni.navigateTo({
						url: '/pages/my/card/index'
					})
				}
			},
			tabbarChang (url) {
				uni.switchTab({
					url: url
				})
			}
		},
		computed: {
			mobileEncrypt () {
				return (mobile) => {
					if (mobile) {
						let phone = mobile + ''
						let lenght = phone.length
						
						let a = phone.slice(0, 2)
						let b = phone.slice(lenght - 3, lenght - 1)
						
						return `${a}******${b}`
					}
					
					return ''
				}
			}
		},
	}
</script>

<style lang="scss">
.my-page {
	box-sizing: border-box;
	min-height: 100%;
	background-color: $bg-color;
	position: relative;
	/* #ifdef H5 */
	padding-bottom: var(--window-bottom);
	/* #endif */
	.page-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		height: 440rpx;
		background: linear-gradient(90deg, #e7f1f7, #f6f6f0);
		.mask {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 10;
			height: 50rpx;
			background: linear-gradient(0deg, $bg-color, transparent);
		}
	}
	.container {
		position: relative;
		z-index: 10;
		padding-top: 52rpx;
		padding-bottom: 24rpx;
		.info-box {
			padding: 0 40rpx;
			.user-box {
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				.avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
				.content {
					flex: 1;
					margin-left: 20rpx;
					.name-box {
						.name {
							color: #333;
							font-size: 32rpx;
							font-weight: bold;
						}
						.vip {
							margin-left: 10rpx;
							width: 96rpx;
							height: 32rpx;
						}
					}
					.id {
						margin-top: 16rpx;
						color: #999999;
						font-size: 26rpx;
						.copy {
							margin-left: 6rpx;
							text-decoration: underline;
						}
					}
				}
				.edit-box {
					width: 80rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.recommend {
				margin-top: 30rpx;
				border-radius: 8rpx;
				padding: 12rpx 16rpx;
				background-color: #fff;
				position: relative;
				z-index: 2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.info {
					display: flex;
					align-items: center;
					.avatar {
						margin-right: 10rpx;
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
					}
					.name {
						margin-left: 10rpx;
						color: #666666;
						font-size: 26rpx;
					}
				}
				.look {
					color: #666666;
					font-size: 26rpx;
					text-decoration: underline;
				}
			}
			.data-box {
				margin-top: 24rpx;
				border-radius: 14rpx 14rpx 0 0;
				padding: 33rpx 0;
				background: linear-gradient(90deg, #343434, #494e66);
				display: flex;
				.item {
					flex: 1;
					height: 110rpx;
					color: #fff;
					display: flex;
					align-items: center;
					&:first-child {
						border-right: 1rpx solid #656770;
					}
					.data {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
					}
					.label {
						font-size: 24rpx;
					}
					.value {
						margin-top: 4rpx;
						font-size: 40rpx;
					}
					.btn-box {
						width: 120rpx;
						height: 110rpx;
						padding: 0 10rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.btn {
							margin: 0;
							padding: 0;
							border-radius: 50rpx;
							width: 120rpx;
							height: 50rpx;
							color: #fff;
							font-size: 28rpx;
							line-height: 50rpx;
							&:nth-of-type(1) {
								background-color: #5749f7;
							}
							&:nth-of-type(2) {
								background-color: #9f7453;
							}
						}
					}
				}
			}
			.contribution {
				height: 100rpx;
				padding: 0 24rpx;
				background: linear-gradient(90deg, #ffffff, #dfddff);
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label-box {
					color: #333333;
					.label {
						font-size: 24rpx;
					}
					.value {
						margin-left: 28rpx;
						font-size: 34rpx;
						font-weight: bold;
					}
				}
				.btn {
					margin: 0;
					padding: 0;
					border-radius: 50rpx;
					width: 160rpx;
					height: 50rpx;
					color: #5749f7;
					font-size: 26rpx;
					font-weight: bold;
					line-height: 50rpx;
					background-color: #fff;
				}
			}
		}
		.fun-box {
			padding: 0 24rpx;
			.card-box {
				padding: 38rpx 0 42rpx;
				border-radius: 16rpx;
				background-color: #fff;
				.title-box {
					padding: 0 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.title {
						color: #333;
						font-size: 32rpx;
						font-weight: bold;
					}
					.mord {
						display: flex;
						align-items: center;
						justify-content: center;
						.text {
							margin-right: 4rpx;
							color: #999;
							font-size: 24rpx;
						}
					}
				}
				.list {
					margin-top: 30rpx;
					display: flex;
					flex-wrap: wrap;
					.item {
						width: 25%;
						padding: 20rpx 0;
						text-align: center;
						&.item-33 {
							width: 33.33%;
						}
						.icon {
							width: 48rpx;
							height: 48rpx;
						}
						.label {
							margin-top: 32rpx;
							color: #666666;
							font-size: 26rpx;
						}
					}
				}
			}
			.promotion-box {
				margin-top: 24rpx;
				border-radius: 16rpx;
				overflow: hidden;
				.top {
					margin-bottom: 2rpx;
				}
				.center {
					display: flex;
					gap: 2rpx;
					.item {
						flex: 1;
					}
				}
				.bottom {
					margin-top: 2rpx;
				}
				.image {
					width: 100%;
				}
			}
			.shop-box {
				margin-top: 10rpx;
				display: flex;
				gap: 10rpx;
				.item {
					flex: 1;
					height: 128rpx;
					border-radius: 16rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					.icon {
						width: 64rpx;
						height: 64rpx;
					}
					.text {
						margin-left: 16rpx;
						color: #000;
						font-size: 32rpx;
					}
				}
			}
		}
	}
	.popup-box {
		box-sizing: border-box;
		padding: 34rpx 40rpx 88rpx;
		width: 540rpx;
		.title-box {
			color: #333;
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
		.content {
			margin-top: 56rpx;
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				&:not(:last-of-type) {
					margin-bottom: 36rpx;
				}
				.text {
					color: #333;
				}
				.copy {
					color: #444;
					text-decoration: underline;
				}
			}
		}
	}
	.real-popup {
		box-sizing: border-box;
		padding: 90rpx 0 90rpx;
		width: 580rpx;
		text-align: center;
		.image {
			width: 204rpx;
			height: 204rpx;
		}
		.text {
			margin-top: 14rpx;
			color: #333;
			font-size: 34rpx;
			font-weight: bold;
		}
		.btn {
			margin: 88rpx auto 0;
			border-radius: 100rpx;
			width: 440rpx;
			height: 100rpx;
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 100rpx;
			background-color: #5749f7;
		}
	}
}
</style>
